<template>
	<view class="container">
		<!-- <view class="left-bottom-sign"></view> -->
		<view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
		<!-- <view class="right-top-sign"></view> -->
		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
		<view class="wrapper">
			<!-- <view class="left-top-sign">LOGIN</view> -->
			<!-- <view class="welcome">
				欢迎回来！
			</view> -->
			<image src="/static/icon/yumi_logo_icon.png" class="logoImg" mode=""></image>
			<view class="tabsContent">
				<myTab :tabs="tabs" border='#f35d1d' @tabClick="tabChange" acctiveText></myTab>
			</view>

			<view class="input-content">
				<view class="input-item">
					<text class="tit">手机号码</text>
					<input type="number" :value="mobile" placeholder="请输入手机号码" maxlength="11" data-key="mobile" @input="inputChange" />
				</view>
				<view class="input-item" style="margin-bottom:10px" v-show="iscode">
					<text class="tit">密码</text>
					<input :value="password" placeholder="请输入密码" placeholder-class="input-empty" maxlength="20" password data-key="password"
					 @input="inputChange" />
				</view>
				<view class="input-item" style="margin-bottom:10px;position: relative;" v-show="!iscode">
					<text class="tit">验证码</text>
					<input :value="securitycode" type="text" placeholder="请输入验证码" placeholder-class="input-empty" maxlength="20"
					 data-key="securitycode" @input="inputChange" />
					 <!-- :class="[isSend?'code-dis':'securitycode']" -->
					<button class="securitycode" type="default" @click="sendValide" >{{codeTips}}</button>
				</view>
				<view style="display: flex;justify-content: space-between;">
					<view style="font-size:14px;color: #999;" @click="changeipt">{{changeText}}</view>
					<!-- <button type="default" class="wxbtn">使用微信登陆</button> -->
				</view>
			</view>
			<button class="confirm-btn" @click="toLogin" :disabled="logining">登录</button>
			<view class="forget-section" @click="navToForget">
				忘记密码?
			</view>
			<view class="" v-if="false">
				<view class="lineflex">
					<view class="line"></view>
					<view>使用微信登陆</view>
					<view class="line"></view>
				</view>
				<!-- #ifdef APP-PLUS -->
				<button class="wxbtn" @click="tologin" >
					<image class="wxbgimage" src="../../static/wx.png" mode=""></image>
				</button>
				<!-- #endif -->

				<!-- #ifdef H5 || MP-WEIXIN -->

				<button class="wxbtn" open-type="getUserInfo" @getuserinfo="getUserInfo" withCredentials="true">
					<image class="wxbgimage" src="../../static/wx.png" mode=""></image>
				</button>

				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	import myTab from "@/components/scrollTab/scrollTab.vue"
	import {
		sendValidaCode
	} from '@/common/loadUserInfo.js'
	export default {
		components: {
			myTab
		},
		data() {
			return {
				codeTips: '发送验证码',
				timeer: null,
				mins: 60,
				isSend: false,
				username: '',
				pic: '',
				changeText: '点击切换验证码登陆',
				iscode: true,
				mobile: '',
				securitycode: '',
				password: '',
				logining: false,
				validate: {},
				tabs: ['登陆', '注册'],
				unionId:'',
			}
		},
		watch: {
			'mobile': {
				handler: function(val) {
					let that = this;
					if (val) {

					}
				}
			},
		},
		onLoad(options) {

		},
		methods: {
			tologin() {
				let that = this;
				uni.login({
					success: (data) => {
						let code = data.code
						that.unionId = data.authResult.unionid
						uni.getUserInfo({
							provider: 'weixin',
							success: res => {
								let user = {
									username: res.userInfo.nickName,
									pic: res.userInfo.avatarUrl
								}
								let data = {
									unionid: that.unionId
								}
								uni.setStorageSync('unionid',that.unionId)
								uni.setStorageSync('user', user)
								that.$Request.request('/api/users/miniWxLogin', 'POST', data, false).then(resukt_ => {
									if (resukt_.status == 1) {
										let userInfo = {
											token: resukt_.data.token,
										}
										that.$api.msg('登录成功')
										uni.setStorageSync('userInfo', userInfo)
										// uni.setStorageSync('isWeixin',1)
										setTimeout(() => {
											uni.switchTab({
												url: '/pages/index/index'
											})
										}, 200)
									} else {
										// uni.setStorageSync('isWeixin',1)
										uni.setStorageSync('openid', resukt_.data.openid)
										if (resukt_.status == 901) {
											uni.navigateTo({
												url: '/subPackage/bindmobile/bindmobile'
											})
										}
									}
								}).catch(error => {
									console.log(error, 'err')
									uni.setStorageSync('openid', error.data.openid)
									if (error.status == 901) {
										console.log(uni.getStorageSync('user'))
										uni.navigateTo({
											url: '/subPackage/bindmobile/bindmobile'
										})
									}
								})
							}
						});
					},
					fail: (err) => {
						
					}
				})
			},
			getUserInfo() {
				let that = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						let code = loginRes.code
						// 设置用户openid
						uni.getUserInfo({
							provider: 'weixin',
							success: res => {
								console.log(res)
								let user = {
									username: res.userInfo.nickName,
									pic: res.userInfo.avatarUrl
								}
								uni.setStorageSync('user', user)
								that.$Request.request('/api/users/miniWxLogin', 'POST', {
									code
								}, false).then(info => {
									console.log(info)
									if (info.status == 1) {

										let userInfo = {
											token: info.data.token,
										}
										that.$api.msg('登录成功')
										uni.setStorageSync('userInfo', userInfo)
										setTimeout(() => {
											uni.switchTab({
												url: '/pages/index/index'
											})
										}, 200)
									}
									if (info.status == 901) {
										console.log('11')
										uni.setStorageSync('session_key', info.data.session_key)
										uni.setStorageSync('openid', info.data.openid)
										uni.login({
											provider: 'weixin',
											success: (result) => {
												uni.getUserInfo({
													provider: 'weixin',
													success: info => {
														let user = {
															username: info.userInfo.nickName,
															pic: info.userInfo.avatarUrl
														}
														uni.setStorageSync('user', user)
														uni.navigateTo({
															url: '/subPackage/bindmobile/bindmobile'
														})

													}
												});
											}
										})
									}
								}).catch(err => {

								})

							}
						});

					}
				});
			},
			//忘记密码
			navToForget() {
				uni.navigateTo({
					url: '/subPackage/forgetPwd/forgetPwd?type=forget'
				})
			},
			changeipt() {
				this.iscode = !this.iscode
				this.iscode ? this.changeText = '点击切换验证码登陆' : this.changeText = '点击切换密码登陆';
				if (this.iscode) {
					this.securitycode = ''
				}
			},
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			navBack() {
				// uni.navigateBack();
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			tabChange(item) {
				if (item.index == 1) {
					this.toRegist()
				}
			},
			toRegist() {
				// this.$api.msg('去注册');
				uni.navigateTo({
					url: '../../subPackage/forgetPwd/forgetPwd?type=regist'
				})
			},
			//发送验证码
			sendValide() {
				if(this.isSend) return;
				let phoneReg = /^1[3456789]\d{9}$/
				if(!this.mobile){
					return this.$api.msg('请输入手机号')
				}
				if (!phoneReg.test(this.mobile)) {
					this.$api.msg('手机号码输入错误！')
					return
				}
				console.log('11')
				let that = this
				sendValidaCode({
					data: {
						phone: that.mobile
					},
					success: (res) => {
						that.$api.msg('验证码发送成功！')
						// this.handleTime();
					}

				})
			},
			// 倒计时
			handleTime(){
				this.isSend = true;
				this.codeTips = `${this.mins}后重新获取`
				this.timeer = setInterval(()=>{
					if(this.mins == 0){
						this.codeTips = '重新获取'
						this.isSend = false;
						this.mins = 60;
						clearInterval(this.timeer)
						return false;
					}
					this.mins--;
					this.codeTips = `${this.mins}s后获取`
				},1000)
			},
			async toLogin() {
				let phoneReg = /^1[3456789]\d{9}$/
				let pwdReg = /^[0-9A-Za-z]{6,10}$/
				// if (!phoneReg.test(this.mobile)) {
				// 	this.$api.msg('手机号码输入错误！')
				// 	return;
				// }
				if (!this.iscode) {

				} else {
					// if (!pwdReg.test(this.password)) {
					// 	this.$api.msg('密码输入错误！')
					// 	return;
					// }
				}
				let that = this
				let newurl = '';
				let data = {};
				if (this.securitycode != '') {
					data = {
						phone: that.mobile,
						code: that.securitycode
					}
					newurl = '/api/users/smsLogin'
				} else {
					data = {
						loginName: that.mobile,
						loginPwd: that.password
					}
					newurl = '/api/users/checkLogin'
				}
				// console.log(data)
				// return;
				that.$Request.request(newurl, 'POST', data).then(res => {
					if (res.status == 1) {
						console.log(res)
						if (res.data) {
							let userInfo = {
								loginName: that.mobile,
								token: res.data.token,
							}
							uni.setStorageSync('userInfo', userInfo)
							that.logining = false;
							that.$api.msg('登陆成功！')
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}, 200)
						}
					}
				}).catch(err => {
					console.log(err)
					that.logining = false;
					that.$api.msg(err.msg)
				})
			}
		},

	}
</script>

<style lang='scss'>
	.securitycode {
		position: absolute;
		right: 40upx;
		width: 180upx;
		height: 50upx;
		line-height: 50upx;
		font-size: 24upx;
		background-color: #ff8e32 !important;
		bottom: 5px;
		color: #fff !important;
		z-index: 99;
	}

	.wxbtn {
		width: 40px;
		height: 40px;
		border-radius: 30px;
		padding: 0;

		.wxbgimage {
			width: 40px;
			height: 40px;
		}
	}

	.lineflex {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		margin-bottom: 15px;
		font-size: 12px;
		align-items: center;
		color: #999;

		.line {
			width: 35%;
			height: 1px;
			background-color: #f2f2f2;
		}
	}

	.forget-section {
		margin-bottom: 50px;
	}

	@import './login.scss'
</style>
